<template>
	<div class="home">
		<view class="cu-custom" :style="{ height: wanlsys.height + 'px' }">
			<view class="cu-bar bg-bgcolor fixed" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px' }">
				<view class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<view class="content" :style="{top: wanlsys.top + 'px'}">
					完善信息
				</view>
			</view>
		</view>
		<div class="home_list">
			<h4>
				性別
			</h4>
			<div class="home_ul">
				<block v-for="(item,index) in gender_arr" :key="index">
					<div :class="active_gender===index?'home_active':''" @tap="Togender(index)">{{item}}</div>
				</block>
			</div>
		</div>
		
		<div class="home_list">
			<h4>
				年龄
			</h4>
			<div class="home_ul">
				<block v-for="(item,index) in ages_arr" :key="index">
					<div :class="active_ages===index?'home_active':''" @tap="Toages(index)">{{item}}</div>
				</block>
			</div>
		</div>
		
		<div class="home_list">
			<h4>
				婚恋阶段
			</h4>
			<div class="home_ul">
				<block v-for="(item,index) in married_arr" :key="index">
					<div :class="active_married===index?'home_active':''" @tap="Tomarried(index)">{{item}}</div>
				</block>
			</div>
		</div>
		
		<button class="seva" @tap="Dosubmit">确认提交</button>
		<view class="text-center tiaoguo" @click="Todump()">跳过</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				gender_arr:['男','女'],
				ages_arr:[],
				married_arr:[],
				active_ages:0,
				active_gender:0,
				active_married:0,
				gender:0,
				ages:'',
				married:'',
				pageroute:'',
				wanlsys: this.$wanlshop.wanlsys(),
				height: this.$wanlshop.wanlsys().windowHeight,
			}
		},
		onLoad(options) {
			if(options.url&&options.url!=undefined){
				this.pageroute = options.url;
			}
		    this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				console.log(11122);
				this.$api.get({
					url: '/wanlshop/user/getinfo',
					data: {},
					success: res => {
						console.log(res.ages);
						this.ages_arr=res.ages;
						this.married_arr=res.married;
						this.gender=this.gender_arr[0]=='男'?1:2;
						this.ages=this.ages_arr[0];
						this.married=this.married_arr[0];
					}
				});
			},
			Togender(index){
				this.active_gender=index;
				this.gender=this.gender_arr[index]=='男'?1:2;
			},
			Toages(index){
				this.active_ages=index;
				this.ages=this.ages_arr[index];
			
			},
			Tomarried(index){
				this.active_married=index;
				this.married=this.married_arr[index];
			},
		
			Dosubmit() {
				this.$api.post({
					url: '/wanlshop/user/info',
					data: {
						gender: this.gender,
						ages: this.ages,
						married: this.married,
					},
					success: res => {
						this.$store.dispatch('user/login', res);
						this.$store.dispatch('cart/login');
						this.$store.dispatch('chat/get');
						if(this.pageroute==''){
							uni.switchTab({
								url:'/pages/find/find'
							});
						}else{
							uni.reLaunch({url: decodeURIComponent(this.pageroute)}); 
						}
					}
				});
			},
			Todump(){
				if(this.pageroute==''){
					uni.switchTab({
						url:'/pages/find/find'
					});
				}else{
					uni.reLaunch({url: decodeURIComponent(this.pageroute)}); 
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home_list{
		height: auto;
		overflow: hidden;
		width: 690upx;
		background: #FFFFFF;
		border-radius: 12upx;
		margin: 0 auto 12upx auto;
		h4{
			font-size: 30upx;
			font-weight: 400;
			color: #000000;
			height: 70upx;
			display: flex;
			align-items: center;
			padding: 0 30upx ;
		}
		.home_ul{
			height: auto;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx 10upx 30upx;
			margin-top: 30upx;
			
			div{
				width: 194upx;
				height: 64upx;
				background: #FFFFFF;
				border: 1px solid #E8E8E8;
				border-radius: 12upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 18upx;
				margin-bottom: 18upx;
			}
			div:nth-child(3n){
				margin-right: 0;
			}
			.home_active{
				border:1px solid #FF6400;
				background: #FFF5EE;
			}
		}
	}
	.seva{
		width: 330upx;
		height: 100upx;
		background: #FF6400;
		border-radius: 50upx;
		font-size: 32upx;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 140upx auto 40upx;
	}
	.tiaoguo{
		color: #FF6400;
		font-size: 30upx;
	}
</style>
